<template>
  <button class='cute-btn' :class="{'cute-btn-focus':active}" @click="click">
    <slot>{{ info }}</slot>
  </button>
</template>

<script>
export default {
  name: "GoCuteButton",
  props: {
    info: {
      type: String,
      default: 'click me'
    }
  },
  data() {
    return {
      active: false,
    }
  },
  methods: {
    click() {
      this.active = true;
      this.$emit('click');
      setTimeout(() => {
        this.active = false;
      }, 250);
    }
  }
}
</script>

<style lang="less">
.cute-btn {
  height: 37.5px;
  background: #66cbff;
  color: #fafafa;
  display: block;
  text-decoration: none;
  border-radius: 5px;
  font-size: 10px;
  font-family: ZCOOL, serif;
  box-shadow: 0 7.5px 0 #7fb1e5, 0 12.5px 0 3.5px #c9e8e3;
  text-align: center;
  padding: 10px 20px;
  position: relative;
  transition: all 0.25s;

  border: 0;
}

.cute-btn-focus {
  transition: all 0.25s;
  box-shadow: 0 7.5px 0 #afcae0, 0 12.5px 0 3.5px #c9e8e3;
}

.cute-btn:active {
  box-shadow: 0 0 0 3.5px #c9e8e3;
  transform: translate(0, 12.5px);
  transition: all 0.1s;
}

</style>